<template>
  <div id="a">
    <div id="qqq">
      <a id="a1" class="fa fa-ellipsis-h" @click="btnclick"></a>
      <a v-if="!a" id="b" class="fa fa-user-circle-o" @click="lr"></a>
      <div id="ys" v-if="a">
        <img  class="yangshi" @click="lr" :src="'http://127.0.0.1:3000'+data.data.avatar" alt="">

      </div>
    </div>
    
    <div id="a2" v-show="c">
      <div>
        <router-link class="asd" to="/">首页</router-link>
        <router-link class="asd" to="/meiwen">美文</router-link>
        <router-link class="asd" to="/xiaozu">小组</router-link>
        <router-link class="asd" to="/riji">日记</router-link>
      </div>

      <router-link class="asd" to="/publish">发表文章</router-link>
    </div>
    <div id="a3" v-show="b">
      <!--<span>qweqwe</span>-->
      <div v-show="cut">
        <router-link class="asd" to="/regist">注册</router-link>
        <router-link class="asd" to="/login">登录</router-link>
      </div>
      <div v-if="!cut" id="bb">
        <div>
          <router-link @click="Setup" class="asd" to="/setup">设置</router-link>
          <a class="asd">喜欢</a>
          <router-link class="asd" to="/remind">提醒
          {{remind.data[0].news.length}}
          </router-link>
        </div>
        <a class="asd" @click="exit">退出登录</a>
      </div>
    </div>
    <!--{{remind}}-->
  </div>
</template>

<script>
  import {mapState} from "vuex";
  export default {
    data: function () {
      return {
        c: false,
        b:false
      }
    },
    methods: {
      btnclick: function () {
        // console.log(123)
        if (this.c) {
          this.c = !this.c;
          // console.log(this.a);
        } else {
          this.c = !this.c
        }
      },
      lr: function() {
        if (this.b) {
          // console.log(123)
          this.b = !this.b;
          // console.log(this.b);
        } else {
          this.b = !this.b
        }
      },
      exit:function() {
        this.$store.dispatch("exit");
      },
      Setup:function(){
        this.$store.dispatch("Setup")
      }
    },
    mounted: function(){
      this.$store.dispatch("updata");
      this.$store.dispatch("isLogin");
      this.$store.dispatch("remind");
      
    },
    computed:{
      ...mapState([
        "cut",
        "data",
        "a",
        "remind"
      ])
    }
  }

</script>

<style scoped>
  #a {
    /*display: flex;*/
    justify-content: space-between;
    width: 100%;
    /*height: 30px;*/
    background-color: #F9CDC8;
  }

  #a1 {
    margin-left: 8px;
    margin-top: 4px;
    width: 22px;
    height: 40px;
    /*border: 1px solid black;*/
    text-align: center;
    line-height: 40px;
    font-size: 30px;
    color: white;
  }

  #a2 {
    background-color: #dddddd;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    height: 30px;
    line-height: 30px;
  }
  a{
    color: #666;
  }
  .asd {
    margin-left: 10px;
    margin-right: 6px;
    font-size: 15px;
    text-decoration: none;
  }
  #qqq{
    display: flex;
    justify-content: space-between;
  }
  #b{
    padding-bottom: 5px;
    margin-right: 8px;
    margin-top: 12px;
    text-align: center;
    font-size: 20px;
    color: white;
  }
  #a3 {
    background-color: #dddddd;
    height: 30px;
    line-height: 30px;
    text-align: left;
  }
  #bb{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
  }
  .yangshi{
    width: 20px;
    height: 20px;
    border-radius: 50%;
  }
  #ys{
    padding-top: 12px;
    padding-right: 6px;
  }
</style>